<template>
  <el-container>
    <el-aside style="width: calc(100% - 140px); overflow: auto; border-right: solid rgb(223, 223, 223); border-width: 1px">
      <el-table highlight-current-row :data="tableData" stripe height="100%">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, tableColumns)
            }
          "
        />
        <el-table-column width="140" label="操作">
          <template #default="scope">
            <el-button
              :disabled="workers.filter((r) => r.isselect).length === 0 || scope.row.status !== e_call_status.开立"
              size="small"
              @click="add(scope.row)"
            >
              加入
            </el-button>
            <el-button :disabled="scope.row.status !== e_call_status.已安排" size="small" @click="remove(scope.row)"> 移除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-aside>
    <el-main style="overflow: auto; height: 100%">
      <div style="height: calc(100% - 50px)">
        <div v-for="worker in workers" :key="worker.name" style="margin-bottom: 20px; cursor: pointer">
          <el-badge
            v-if="worker.current_task && find_detail(worker.current_task.billcode).length > 0"
            :value="find_detail(worker.current_task.billcode).length"
          >
            <el-avatar :src="worker.avatar" shape="square" :size="worker.isselect ? 72 : 58" @click="selectWorker(worker)"></el-avatar>
          </el-badge>
          <el-avatar
            v-else
            :src="worker.avatar"
            shape="square"
            :size="worker.isselect ? 72 : 58"
            @click="selectWorker(worker)"
          ></el-avatar>

          <div style="text-align: center">
            <span>{{ worker.name }}</span>
          </div>
        </div>
      </div>
      <el-button
        :disabled="dbStore.mtl_call.filter((r) => r.status === e_call_status.已安排).length === 0"
        type="primary"
        @click="confirm_pick"
        >派单</el-button
      >
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { mtl_call_define } from '@/meta/index'
import { fill_ref_info, cell_formatter, make_billcode, today } from '@/utils/common'
import { onMounted, ref } from 'vue'
import { AVATAR } from '@/img/avatar'
import { useDbStore } from '@/stores/modules/database'
import type { mtl_call, pick_task } from '@/types/billdata'
import { e_call_status, e_pick_status } from '@/types/enum'
import { ElMessageBox } from 'element-plus'
const dbStore = useDbStore()

const workers = ref<{ name: string; avatar: string; isselect: boolean; current_task?: pick_task }[]>([
  { name: '廖化', avatar: AVATAR.廖化, isselect: false },
  { name: '陈到', avatar: AVATAR.陈到, isselect: false },
  { name: '马岱', avatar: AVATAR.马岱, isselect: false },
  { name: '王平', avatar: AVATAR.王平, isselect: false }
])
const tableColumns = mtl_call_define
const tableData = ref<mtl_call[]>()

onMounted(() => {
  const tmp = dbStore.mtl_call
  fill_ref_info(tmp, mtl_call_define)
    .then(() => {
      tableData.value = tmp
    })
    .catch(() => {
      console.log('err')
    })
  workers.value.forEach((r) => {
    r.current_task = dbStore.pick.find((s) => s.status === e_pick_status.开立 && s.worker === r.name)
  })
})
const selectWorker = (c: any) => {
  workers.value.forEach((r) => (r.isselect = false))
  c.isselect = true
}
const find_detail = (bill: string) => {
  return dbStore.mtl_call.filter((r) => r.pick === bill)
}
const add = (m: mtl_call) => {
  const curr_worker = workers.value.find((r) => r.isselect)!
  if (!curr_worker.current_task) curr_worker.current_task = newTask(curr_worker.name)
  curr_worker.current_task.call_count += 1
  m.status = e_call_status.已安排
  m.pick = curr_worker.current_task.billcode
  dbStore.saveMtlCall()
  dbStore.savePickTask()
}
const remove = (m: mtl_call) => {
  const c = dbStore.pick.find((r) => r.billcode === m.pick)!
  c.call_count -= 1
  m.status = e_call_status.开立
  m.pick = undefined
  dbStore.saveMtlCall()
  dbStore.savePickTask()
}
const newTask = (worker: string) => {
  const task = {
    billcode: make_billcode('PK'),
    docdate: today(),
    worker: worker,
    call_count: 0,
    status: e_pick_status.开立,
    detail: []
  }
  dbStore.addPickTask(task)
  return task
}
const confirm_pick = () => {
  workers.value.forEach((r) => {
    if (r.current_task) r.current_task!.status = e_pick_status.发放
    dbStore.mtl_call
      .filter((s) => s.status === e_call_status.已安排)
      .forEach((s) => {
        s.status = e_call_status.已下派
      })
    r.isselect = false
    r.current_task = undefined
  })
  dbStore.saveMtlCall()
  dbStore.savePickTask()
  ElMessageBox.alert('操作成功', '提示')
}
</script>
